<template>
	<view>
		<view class="cu-card">
			<view class="cu-item status_card text-center">
				<view class="main-bg-color">{{statusName}}</view>
			</view>
		</view>
		<view class="cu-card">
			<view class="cu-item shadow address_card">
				<view class="cu-list menu menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar lg cuIcon-locationfill main-color"></view>
						<view class="content flex-sub padding-right" v-if="order.dispatchId===shippingMethodForExpress">
							<view>{{order.address.consignee}} {{order.address.phone}}</view>
							<view class="text-gray flex justify-between">
								{{order.address.address}}
							</view>
						</view>
						<view class="content flex-sub padding-right" v-else>
							<view class="text-gray flex justify-between">买家自提</view>
						</view>						
					</view>
				</view>
			</view>
		</view>
		<view class="cu-card case pro_card">
			<view class="cu-item shadow" v-for="(item,index) in order.skus" :key="index">
				<view class="cu-list menu-avatar">
					<view class="cu-item">
						<view class="cu-avatar">
							<image :src="item.url" mode="aspectFit"></image>
						</view>
						<view class="content flex-sub">
							<view>{{item.productName}}</view>
							<view class="text-gray flex justify-between margin-top-10">
								{{item.skuName}}
							</view>
							<view class="text-gray fr" v-if="order.orderStatus===103 && item.evaluate===false">
								共{{item.buyCount}}{{item.unit}} 小计:<text class="text-red">￥{{item.payPrice}}</text>
							</view>
							<view class="text-gray fr" v-else>￥{{item.salePrice}}</view>
						</view>
					</view>
				</view>
				<view class="text-gray fr padding-sm" v-if="order.orderStatus===103 && item.evaluate===false">
					<button class="cu-btn round main-bg-color" @click="toEvaluate(order.orderNo,item.sn)">评价</button>
				</view>
				<view class="item_total" v-else>共{{item.buyCount}}{{item.unit}} 小计:<text class="text-red">￥{{item.payPrice}}</text></view>
			</view>
		</view>
		<view class="cu-card remark_card">
			<view class="cu-item shadow">
				<view class="title text-gray">订单备注</view>
				<view class="cu-form-group">
					{{order.remark}}
				</view>
			</view>
		</view>
		<view class="cu-card price_card">
			<view class="cu-list menu">
				<view class="cu-item">
					<view class="title">商品总价</view>
					<text class="text-red">{{order.productPrice}}元</text>
				</view>				
				<view class="cu-item">
					<view class="title">订单运费</view>
					<text class="text-red">{{order.expressPrice}}元</text>
				</view>
				<view class="cu-item">
					<view class="title">优惠卷</view>
					<text class="text-red">{{order.discountPrice}}元</text>
				</view>
			</view>
		</view>
		<view class="cu-card">
			<view class="cu-item contact_card">
				<button type="primary" open-type="contact" class="cuIcon-message"><text class="margin-left-10">联系商家</text></button>
			</view>
		</view>
		<view class="cu-card order_times">
			<view class="cu-item text-lg">
				<view class="text">订单编号: {{order.orderNo}}</view>
				<view class="text">下单时间: {{order.createDate}}</view>
				<view class="text">支付方式: {{order.payTypeName}}</view>
				<view class="text">支付时间: {{order.payDate?order.payDate:""}}</view>
				<view class="text">交易单号: {{order.tradeNo}}</view>
			</view>
		</view>		
		<view class="split-line margin-bottom-100"></view>
		<view class="split-line margin-bottom-100"></view>
		<view class="cu-bar bg-white tabbar border shop">
			<button class="action" open-type="contact">
				<view class="cuIcon-service text-green">
					<view class="cu-tag badge"></view>
				</view> 客服
			</button>
			<view class="action">
				<view class="cuIcon-cart">
					<view class="cu-tag badge">99</view>
				</view>
				购物车
			</view>
			<view class="btn-group">
				<button class="cu-btn bg-orange round shadow-blur">加入购物车</button>
				<button class="cu-btn bg-red round shadow-blur">立即订购</button>
			</view>
		</view>
		<view class="foot-bar">
			<view class="bg-white border tabbar shop">
				<view class="margin-right-20 text-right">
					<text class="margin-right-50">
						<text class="text-gray margin-right-10">共{{productCount}}件</text>
						<text class="text-bold text-xl">合计:</text>
						<text class="text-red text-xl">￥{{order.payPrice}}</text>
					</text>
					<button v-if="order.canConfirmReceive" :disabled="loading" class="cu-btn main-bg-color round xl" @click="confirmReceive">确认收货</button>
					<button v-if="order.canPay" :disabled="loading" class="cu-btn main-bg-color round xl" @click="payOrder">立即支付</button>
					<button v-if="order.canCancel" :disabled="loading" class="cu-btn round xl margin-left-50" @click="cancelOrder">取消</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {OrderService} from "@/api/OrderService.js"
	export default {
		data() {
			return {
				loading:false,shippingMethodForExpress:1,shippingMethodForSelf:4,productCount:0,orderNo:undefined,order:undefined,statusName:''
			}
		},
		onPullDownRefresh() {
			this.loadOrderInfo();
			uni.stopPullDownRefresh();
		},
		onLoad(option) {
			this.orderNo=option.orderNo;
		},
		onShow() {
			this.loadOrderInfo();
		},
		methods: {
			loadOrderInfo(){
				OrderService.detail(this.orderNo).then(res=>{
					this.order=res;
					const orderStatus=parseInt(this.order.orderStatus);
					const payStatus=parseInt(this.order.payStatus);
					const expressStatus=parseInt(this.order.expressStatus);
					this.calculateOrderProductCount();
					this.getOrderStatusName();
					if(this.order.canPay){
						//未支付的新订单去微信服务器查询支付状态
						this.loadOrderTradeStatus();
					}
				});
			},
			loadOrderTradeStatus(){
				const that=this;
				OrderService.getOrderTradeStatus(this.orderNo).then(status=>{
					if("SUCCESS"===status){
						that.order.payStatus=301;
						that.order.expressStatus=201;
						that.order.canPay=false;
						that.getOrderStatusName();
					}
				});
			},
			calculateOrderProductCount(){
				this.productCount = this.order.skus.reduce((total,item)=>{
					return total+item.buyCount
				},0);
			},
			getOrderStatusName(){
				const status=[{status:'100-301-201',name:'待商家发货'},
				{status:'100-302-201',name:'待商家退款'},{status:'100-302-202',name:'待商家退款'},
				{status:'103-302-203',name:'待商家退款'},{status:'103-302-204',name:'待商家退款'},
				{status:'103-302-205',name:'待商家退款'},
				{status:'100-301-202',name:'待收货'},{status:'100-300-200',name:'订单未支付'},
				{status:'101-300-200',name:'订单已取消'},{status:'103-301-203',name:'订单已完成'},
				{status:'102',name:'订单已关闭'}];
				const orderStatus=parseInt(this.order.orderStatus);
				const payStatus=parseInt(this.order.payStatus);
				const expressStatus=parseInt(this.order.expressStatus);
				let flag='';
				if(orderStatus===102){
					flag=orderStatus.toString();
				}else{
					flag=orderStatus+'-'+payStatus+'-'+expressStatus;
				}
				const result=status.filter((item,index)=>{
					return item.status===flag;
				});
				this.statusName = result.length>0?result[0].name:'';
			},
			cancelOrder(){
				const that=this;
				that.loading=true;
				OrderService.cancelTemplates().then(ids=>{
					uni.requestSubscribeMessage({tmplIds:ids,complete:function(){
						uni.showModal({
							title: '提示',content: '您确认要取消该订单吗?',
							success(res) {
							  if (res.confirm) {
								OrderService.cancelOrder(that.orderNo).then(()=>{
									that.loadOrderInfo();
								});
							  }
							},
							complete:function(){
								that.loading=false;
							}
						});
					}});
				});
			},
			payOrder(){
				const that=this;
				that.loading=true;
				OrderService.cancelTemplates().then(ids=>{
					uni.requestSubscribeMessage({tmplIds:ids,complete:function(){
						OrderService.payOrder(that.orderNo).then(res=>{
							uni.requestPayment({
								paySign:res.paySign,nonceStr:res.nonceStr,package:res.package,
								timeStamp:res.timeStamp,signType:res.signType,provider:res.provider,
								success:function(res){
									uni.showToast({icon:"none", title:"支付成功,支付状态会有延时请稍后再查看订单支付状态!"});
									let timer=setInterval(function(){
										if(that.order.canPay){
											that.loadOrderInfo();
										}else{
											clearInterval(timer);
										}
									},2000);
								},
								fail:function(err){
									uni.showToast({icon:"none",title:"支付失败!"});
								},
								complete:function(){
									that.loading=false;
								}
							})
						});
					}});
				});
			},
			confirmReceive(){
				const that=this;
				that.loading=true;
				uni.showModal({
					title: '提示',content: '您确认已收到货了吗?',
					success(res) {
					  if (res.confirm) {
						OrderService.confirmReceive(that.orderNo).then(res=>{
							uni.showToast({title:"收货成功!"});
							that.loadOrderInfo();
						});
					  }
					},complete:function(){
						that.loading=false;
					}
				});
			},
			toEvaluate(orderNo,sn){
				uni.navigateTo({
					url:"/pages/home/order/evaluate?orderNo="+orderNo+"&sn="+sn
				});
			}
		}
	}
</script>
<style lang="scss">
	page {background: #f1f1f1 !important;}

	.cu-list {
		.cu-item {
			.cu-avatar {
				background: none !important;
			}
		}
	}

	.status_card{
		line-height:100px;
		color:#FFFFFF;
		font-size:1.5rem;
		margin:30rpx 30rpx 0rpx 30rpx !important;
	}
	.address_card{
		margin: 30rpx 30rpx 10rpx 30rpx !important;
		height: 180rpx !important;
		padding: 20rpx 0rpx;
	}
	.pro_card {
		.cu-item{
			margin:10rpx 30rpx;
			.cu-list {
				padding: 30rpx 10rpx !important;
				.cu-item {
					height: auto !important;
					&:after {
						transform-origin: unset !important
					}
				}
			}
			
			.cu-list:nth-child(1) {
				padding-bottom: 0 !important;
			}
			
			.cu-list:nth-child(2) {
				padding: 0 !important;
			
				.cu-item {
					height: unset !important;
				}
			}
		}

		.item_total {
			text-align: right;
			margin: 30rpx;
		}

		.cu-avatar {
			width: 180rpx;
			height: 180rpx;
			left: 0rpx !important;
			position: relative !important;
		}

		.content {
			margin-left: 20rpx;
			position: relative !important;
			left: 0rpx !important;
		}
	}

	.price_card{
		.cu-item{margin:0 30rpx;}
	}
	.remark_card {
		.title {
			padding: 30rpx 30rpx 0;
		}
		.cu-item{margin:10rpx 30rpx 20rpx !important;}
	}
	.contact_card{
	}
	.foot-bar {
		position: fixed;
		width: 100%;
		bottom: 0;
		.tabbar {
			padding: 30rpx;
		}
	}
	.order_times{
		.text{margin:20rpx 20rpx 20rpx 50rpx;}
	}
</style>
